﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <META http-equiv="X-UA-Compatible" content="IE=7">
    
    <title>Basic Layout</title>
    <style type="text/css">
        html,body,div{font-family:Verdana}
        #Head{border-bottom:solid 10px #369}
        #Body{margin-left:200px;background-color:#def}
        #Body h2{float:left;margin-left:-200px;padding:10px;font-size:1em;}
        #Foot{border-top:dashed 1px #369}
        p{page-break-inside:avoid}
    </style>
    <script>
	    function onload(){
		    alert(document.getElementById("Body").getBoundingClientRect().left);
	    }
    </script>
</head>
<body>
    <div id="Head">
        <h1>Basic Layout Header</h1>
    </div>
    <div id="Body">
        <h2>Body Header</h2>
        <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris pretium. Morbi
            nisi velit, lacinia vitae, porttitor nec, laoreet nec, neque. Fusce id dolor. Vivamus
            scelerisque libero. Fusce aliquet gravida dui. Integer vulputate bibendum pede.
            Donec fringilla porta sem. Donec justo pede, fermentum eu, mattis a, malesuada id,
            erat. Maecenas hendrerit justo vitae felis. Praesent ut purus. Pellentesque turpis
            tortor, lobortis sed, fringilla venenatis, mattis nec, ipsum. Nunc non diam. Maecenas
            gravida mollis quam. Aenean nec urna. Quisque gravida, nulla a vulputate mattis,
            mauris justo mollis leo, et pellentesque eros augue sit amet urna. Aliquam rhoncus
            erat in mauris. Nullam ut urna. Nam pharetra, purus ac ultricies consectetuer, est
            leo aliquam augue, vitae pulvinar dui mi scelerisque mi. Integer urna. Praesent
            risus libero, porttitor vel, auctor gravida, posuere vel, felis.
        </p>
        <p>
            Morbi mi orci, lobortis quis, lacinia non, adipiscing in, risus. Phasellus ullamcorper
            mauris ac arcu faucibus accumsan. Quisque nec nisi ut nunc aliquam gravida. Quisque
            congue, metus sed hendrerit gravida, magna mi adipiscing nunc, in consectetuer justo
            libero non justo. Integer purus. Etiam fringilla libero bibendum nulla pellentesque
            eleifend. Ut pulvinar, dolor quis varius porttitor, mauris tellus suscipit risus,
            quis ornare arcu lectus in urna. Nulla accumsan porttitor urna. Nunc sed ipsum ac
            justo malesuada varius. In blandit pharetra odio. Duis lobortis metus id neque.
            Mauris in nisl. Sed commodo, lectus eu luctus viverra, nulla nulla porttitor velit,
            convallis tincidunt nulla sem et dui. Ut lacus mauris, eleifend sed, porta eget,
            placerat at, nibh. Proin justo ipsum, tristique sit amet, aliquet id, volutpat in,
            lorem.
        </p>
        <p>
            Phasellus sapien. Nam at nisi. Praesent pellentesque tristique orci. Ut suscipit
            aliquam felis. Suspendisse nec sem. Cras adipiscing dictum libero. Quisque ac metus
            ac neque adipiscing tempor. Aenean blandit lorem id sapien. Nulla vestibulum augue
            at libero commodo cursus. In hac habitasse platea dictumst. In hac habitasse platea
            dictumst. Fusce placerat, magna a egestas euismod, urna lacus facilisis libero,
            nec interdum erat neque nec purus. Donec vitae arcu ut ipsum scelerisque elementum.
        </p>
        <p>
            Vestibulum consectetuer, quam vel mollis consequat, est sapien pellentesque diam,
            vel aliquet metus libero ac metus. In pharetra, ligula non rutrum interdum, arcu
            tortor viverra elit, ut ullamcorper est magna in velit. Vestibulum massa neque,
            suscipit eget, lacinia eget, euismod a, odio. Phasellus blandit sapien et lacus
            dignissim bibendum. Sed velit. Aliquam fringilla. Nunc urna. Aliquam imperdiet,
            odio non aliquam pellentesque, justo neque feugiat dui, sit amet convallis sem leo
            eu diam. Quisque lectus ligula, placerat nec, vulputate et, sodales eget, eros.
            Integer nisi sem, tincidunt quis, fermentum ac, dapibus in, purus. Cras condimentum
            velit ut eros. In lectus dui, auctor sit amet, tincidunt quis, volutpat ut, diam.
            In dignissim viverra quam. Nullam elementum augue id ante. Aliquam lacus sem, tempus
            non, egestas nec, laoreet in, erat. Nullam tincidunt tincidunt nisl. Maecenas libero
            ipsum, varius nec, feugiat nec, sodales a, enim. Morbi ultrices placerat dolor.
            Nullam vitae enim sit amet neque scelerisque rutrum. Cras fermentum, arcu eu gravida
            vestibulum, dui neque tristique justo, nec blandit lectus quam vitae risus.
        </p>
        <p>
            Morbi mi orci, lobortis quis, lacinia non, adipiscing in, risus. Phasellus ullamcorper
            mauris ac arcu faucibus accumsan. Quisque nec nisi ut nunc aliquam gravida. Quisque
            congue, metus sed hendrerit gravida, magna mi adipiscing nunc, in consectetuer justo
            libero non justo. Integer purus. Etiam fringilla libero bibendum nulla pellentesque
            eleifend. Ut pulvinar, dolor quis varius porttitor, mauris tellus suscipit risus,
            quis ornare arcu lectus in urna. Nulla accumsan porttitor urna. Nunc sed ipsum ac
            justo malesuada varius. In blandit pharetra odio. Duis lobortis metus id neque.
            Mauris in nisl. Sed commodo, lectus eu luctus viverra, nulla nulla porttitor velit,
            convallis tincidunt nulla sem et dui. Ut lacus mauris, eleifend sed, porta eget,
            placerat at, nibh. Proin justo ipsum, tristique sit amet, aliquet id, volutpat in,
            lorem.
        </p>
        <p>
            Phasellus sapien. Nam at nisi. Praesent pellentesque tristique orci. Ut suscipit
            aliquam felis. Suspendisse nec sem. Cras adipiscing dictum libero. Quisque ac metus
            ac neque adipiscing tempor. Aenean blandit lorem id sapien. Nulla vestibulum augue
            at libero commodo cursus. In hac habitasse platea dictumst. In hac habitasse platea
            dictumst. Fusce placerat, magna a egestas euismod, urna lacus facilisis libero,
            nec interdum erat neque nec purus. Donec vitae arcu ut ipsum scelerisque elementum.
        </p>
        <p>
            Vestibulum consectetuer, quam vel mollis consequat, est sapien pellentesque diam,
            vel aliquet metus libero ac metus. In pharetra, ligula non rutrum interdum, arcu
            tortor viverra elit, ut ullamcorper est magna in velit. Vestibulum massa neque,
            suscipit eget, lacinia eget, euismod a, odio. Phasellus blandit sapien et lacus
            dignissim bibendum. Sed velit. Aliquam fringilla. Nunc urna. Aliquam imperdiet,
            odio non aliquam pellentesque, justo neque feugiat dui, sit amet convallis sem leo
            eu diam. Quisque lectus ligula, placerat nec, vulputate et, sodales eget, eros.
            Integer nisi sem, tincidunt quis, fermentum ac, dapibus in, purus. Cras condimentum
            velit ut eros. In lectus dui, auctor sit amet, tincidunt quis, volutpat ut, diam.
            In dignissim viverra quam. Nullam elementum augue id ante. Aliquam lacus sem, tempus
            non, egestas nec, laoreet in, erat. Nullam tincidunt tincidunt nisl. Maecenas libero
            ipsum, varius nec, feugiat nec, sodales a, enim. Morbi ultrices placerat dolor.
            Nullam vitae enim sit amet neque scelerisque rutrum. Cras fermentum, arcu eu gravida
            vestibulum, dui neque tristique justo, nec blandit lectus quam vitae risus.
        </p>
    </div>
    <div id="Foot">
        <p>Footer</p>
    </div>
</body>
</html>
